<template>
  <div>
    <div v-show="type == 1">
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="700px"
        :show-close="false"
      >
        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="24">
            <el-steps :active="active">
              <el-step title="文件上传"></el-step>
              <el-step title="数据导入"></el-step>
              <el-step title="导入完成"></el-step>
            </el-steps>
          </el-col>
        </el-row>

        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="24">
            <div v-if="active == 0">
              <div v-if="title == '批量导入用户'">
                (1) 点击[下载Excel模板]
                按钮，进行内部用户导入模板下载，按照下载的模板要求填写用户信息
              </div>
              <div v-if="title == '批量导入组织'">
                (1) 点击[下载Excel模板]
                按钮，进行内部组织导入模板下载，按照下载的模板要求填写组织信息
              </div>
              <div class="margin-top">
                <el-button
                  v-preventReClick
                  type="primary"
                  @click="importTemplate"
                  >下载Excel模板</el-button
                >
              </div>
              <div class="margin-top-lg" v-if="title == '批量导入用户'">
                (2) 点击[上传用户]
                按钮，将本地填写好的Excel模板上传至系统，进行用户数据的批量导入。一次最多只能导入5000条数据
              </div>
              <div class="margin-top-lg" v-if="title == '批量导入组织'">
                (2) 点击[上传组织]
                按钮，将本地填写好的Excel模板上传至系统，进行组织数据的批量导入。一次最多只能导入5000条数据
              </div>
              <div class="margin-top" v-if="title == '批量导入用户'">
                <uploads
                  ref="upload"
                  :action="upload.url"
                  :isDrag="true"
                  :autoupload="false"
                  :isIcon="true"
                  accept=".xlsx,.xls"
                  :fileList="[]"
                  :fileKey="fileKey"
                  @successUser="successUser"
                  @change="change"
                  >上传用户</uploads
                >
              </div>
              <div class="margin-top" v-if="title == '批量导入组织'">
                <!-- <el-button v-preventReClick type="primary">上传用户</el-button> -->
                <uploads
                  ref="upload"
                  :action="uploadOrg.url"
                  :isDrag="true"
                  :autoupload="false"
                  :isIcon="true"
                  accept=".xlsx,.xls"
                  :fileList="[]"
                  @successUser="successUser"
                  @change="change"
                  >上传组织</uploads
                >
              </div>
            </div>
            <div v-if="active == 1">
              <div class="text-center">
                <div>
                  <i style="font-size: 40px" class="el-icon-loading"></i>
                </div>
                <div class="margin-top-xs">数据导入中</div>
                <div style="margin-top: 70px">
                  当前数据正在导入，您可以点击[最小化]隐藏该页面，数据导入不受影响
                </div>
              </div>
            </div>
            <div v-if="active == 2" class="margin-top-lg">
              <div class="colors text-center">
                <div v-if="errorNum != 0">
                  <i
                    style="font-size: 50px; color: #ffbe00"
                    class="el-icon-warning"
                  ></i>
                </div>
                <div v-if="errorNum == 0">
                  <i
                    style="font-size: 50px; color: #1890ff"
                    class="el-icon-success"
                  ></i>
                </div>
                <!-- <div><i class="el-icon-warning" style="font-size:70px;color:#e6a23c"></i></div> -->
                <div class="margin-top-lg">
                  导入总数居{{ totalNum }}条，导入成功<span
                    style="color: #1890ff"
                    >{{ successNum }}</span
                  >条，导入失败<span style="color: red">{{ errorNum }}</span
                  >条
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <div
          slot="footer"
          class="dialog-footer flex justify-between align-center border-top padding-top"
        >
          <div>
            <el-button v-preventReClick type="text" @click="importLook"
              >导入数据查看</el-button
            >
          </div>
          <div>
            <div v-show="active == 0">
              <el-button v-preventReClick @click="handleclose('1')">取 消</el-button>
              <el-button
                v-preventReClick
                type="primary"
                :disabled="isSucc"
                @click="handleupload"
                >确 定</el-button
              >
            </div>
            <div v-show="active == 1">
              <el-button v-preventReClick @click="handleMin">最小化</el-button>
            </div>
            <div v-show="active == 2">
              <el-button v-preventReClick @click="handleclose('2')">关 闭</el-button>
            </div>
          </div>
        </div>

        <el-drawer
          title="导入错误数据列表"
          append-to-body
          :visible.sync="drawer"
          size="70%"
          custom-class="my-drawer"
          :with-header="false"
          direction="rtl"
        >
          <img
            style="width: 34px; margin-left: -35px; margin-top: 2px"
            src="../../../assets/images/close.png"
            alt
            @click="drawer = false"
          />
          <p
            style="
              display: inline;
              color: black;
              font-size: 16px;
              margin-left: 15px;
            "
          >
            导出错误数据列表
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="仅展示近七天的导入错误数据"
            placement="bottom"
          >
            <div class="icon"></div>
          </el-tooltip>
          <div>
            <el-table
              ref="table"
              :data="list"
              show-overflow-tooltip
              class="margin-top"
            >
              <el-table-column label="序号" align="center" prop="id" />
              <el-table-column
                label="文件名称"
                width="185"
                align="center"
                prop="fileName"
              />
              <el-table-column
                label="文件状态"
                align="center"
                prop="fileStatus"
              />
              <el-table-column
                label="操作人"
                align="center"
                prop="creatorNickname"
              />
              <el-table-column
                label="操作时间"
                align="center"
                prop="createTime"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="处理完成时间"
                align="center"
                prop="finishTime"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.finishTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="文件大小" align="center" prop="fileSize">
                <template slot-scope="scope">
                  <span>{{ scope.row.fileSize }}kb</span>
                </template>
              </el-table-column>
              <el-table-column
                label="总条数"
                align="center"
                prop="fileTotalCount"
              />
              <el-table-column
                label="导入失败条数"
                align="center"
                prop="fileFailCount"
              />
              <el-table-column label="操作" align="center" prop="operation">
                <template v-slot="scope">
                  <i
                    style="color: #1890ff"
                    class="el-icon-download"
                    @click="downloadFile(scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="drawerTotal > 0"
              :total="drawerTotal"
              :page.sync="queryHistoryParams.pageNo"
              :limit.sync="queryHistoryParams.pageSize"
              @pagination="importLook"
            />
          </div>
        </el-drawer>
      </el-dialog>
    </div>

    <div v-show="type === 2" class="types" @click="handleType">
      <div class="postion" v-if="loading">
        <i class="el-icon-loading"></i>
        导入中
      </div>

      <div class="postion colors" v-if="!loading">
        <i class="el-icon-success"></i>
        导入完成
      </div>
    </div>

    <div v-show="type == 3" class="types">
      <div class="postion colors">
        <i class="el-icon-success"></i>
        导入完成
      </div>
    </div>
    <orgstructure v-show="false" ref="org"></orgstructure>
    <Insideorg  v-show="false" ref="insideorg"></Insideorg>
  </div>
</template>
<script>
import orgstructure from "../../../views/organization/components/organizationstructure.vue";
import {
  importTemplate,
  importOrgTemplate,
  getImportFailDataList,
  downloadErrorLog,
  downloadDeptErrorLog,
} from "@/api/system/user";
import {
  importUser,
  importOrg,
  updateImportOrg,
  importResult,
} from "@/api/common/user";
import uploads from "@/components/uploads";
import { getBaseHeader } from "@/utils/request";
import Insideorg from '../../../views/organization/insideorg.vue';
import {parseTime} from "@/utils/ruoyi";

export default {
  components: { uploads, orgstructure, Insideorg },
  props: {
    // title: {
    //   type: String,
    //   default: "批量导入用户"
    // }
  },
  data() {
    return {
      totalNum: undefined,
      successNum: 0,
      errorNum: 0,
      isSucc: true,
      list: [],
      drawer: false,
      loading: true,
      upload: {
        url: importUser(),
      },
      uploadOrg: {
        url: importOrg(),
      },
      queryHistoryParams: {
        pageNo: 1,
        pageSize: 10,
        type: 2, //1用户，2部门
      },
      //drawer总条数
      drawerTotal: 0,
      fileKey: "",
      uploadData: {},
    };
  },
  computed: {
    open() {
      return this.$store.getters.uploadOpen;
    },
    active() {
      console.log(this.$store.getters.uploadActive, "233333");
      return this.$store.getters.uploadActive;
    },
    type() {
      console.log(this.$store.getters.uploadType);
      return this.$store.getters.uploadType;
    },
    title() {
      console.log(this.$store.getters.uploadTitle, "999999");
      return this.$store.getters.uploadTitle;
    },
  },
  methods: {
    init() {
      this.handleType();
    },
    change() {
      console.log("hucihaun--");
      this.isSucc = false;
    },
    successUser(fileKey) {
      console.log("---66-", fileKey);
      importResult(fileKey).then((response) => {
        //fileKey是唯一值，组织用户用同一个接口
        console.log(response.data, "date---");
        if (response.data == null) {
          this.$store.dispatch("uploads/SETACTIVE", 1);
          setTimeout(() => {
            this.successUser(fileKey);
          }, 800);
        } else {
          this.totalNum = response.data.totalCount;
          this.errorNum = response.data.failCount;
          this.successNum = response.data.successCount;
          this.$store.dispatch("uploads/SETACTIVE", 2);
          if (this.title == "批量导入组织") {
            this.$refs.org.getTreeselect();
          } else {
            this.$refs.insideorg.getList();
          }
        }
      });
    },
    successAuthOrg(res) {
      //this.active=2
      this.isSucc = false;
    },
    handleclose(type) {
      if(type=='1'){
        this.$refs.upload.clearFiles()
      }
      this.$store.dispatch("uploads/SETOPEN", false);
    },
    /*下载当前行的文件*/
    downloadFile(row) {
      console.log(row, "row8888---");
      if (this.title == "批量导入用户") {
        downloadErrorLog(row.fileId).then((response) => {
          const timeFormat = parseTime(row.finishTime,'{y}{m}{d}_{h}{i}{s}');
          const fileName = `内部用户错误数据导出${timeFormat}.xlsx`;
          this.$download.excel(response, fileName);
        });
      } else {
        downloadDeptErrorLog(row.fileId).then((response) => {
          const timeFormat = parseTime(row.finishTime,'{y}{m}{d}_{h}{i}{s}');
          const fileName = `内部组织错误数据导出${timeFormat}.xlsx`;
          this.$download.excel(response, fileName);
        });
      }
    },
    //最小化
    handleMin() {
      this.$store.dispatch("uploads/SETTYPE", 2);
      this.$store.dispatch("uploads/SETOPEN", false);
    },
    //最大化
    handleType() {
      console.log("---3");
      this.$store.dispatch("uploads/SETTYPE", 1);
      this.$store.dispatch("uploads/SETOPEN", true);
    },
    /** 下载模板操作 */
    importTemplate() {
      if (this.title == "批量导入用户") {
        importTemplate().then((response) => {
          this.$download.excel(response, "内部用户导入模板.xlsx");
        });
      } else {
        importOrgTemplate().then((response) => {
          this.$download.excel(response, "内部组织导入模板.xlsx");
        });
      }
    },
    // 确定导入
    handleupload() {
      this.$refs.upload.submit();
    },
    //导入查看
    importLook() {
      this.drawer = true;
      if (this.title == "批量导入用户") {
        this.queryHistoryParams.type = 1;
      } else {
        this.queryHistoryParams.type = 2;
      }
      getImportFailDataList(this.queryHistoryParams).then((response) => {
        this.list = response.data.list;
        this.list.forEach((item) => {
          if (item.fileStatus == true) {
            item.fileStatus = "导入成功";
          } else {
            item.fileStatus = "导入失败";
          }
        });
        this.drawerTotal = response.data.total;
        console.log(response.data, "response.data--4-");
      });
    },
  },
  created() {},
};
</script>
<style scoped lang="scss">
.postion {
  position: fixed;
  right: 0;
  bottom: 20%;
  width: 100px;
  border: 1px solid #ddd;
  line-height: 35px;
  height: 35px;
  color: #ddd;
  z-index: 999999999;
  background: #ffffff;
  padding-left: 10px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  i {
    margin-right: 3px;
  }
}
.icon {
  margin-left: 5px;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #959595;
  border-radius: 50%;
  margin-bottom: -3px;
}

.icon::before {
  content: "!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #959595;
}
.colors {
  color: #1890ff;
}
.border-top {
  border-top: 1px solid #ddd;
}
::v-deep .el-step__title {
  font-size: 14px;
}
::v-deep .el-step__title.is-process {
  color: #1257ff;
}
::v-deep .is-process {
  .el-step__icon {
    color: #ffffff;
    background: #1257ff;
    border-color: #ffffff;
  }
}
::v-deep .my-drawer {
  overflow: visible !important;
}

::v-deep .my-drawer section {
  overflow: visible !important;
}
</style>
